<template>
	<view class="wanl-page wanlshop-container" v-if="goods">
		<view class="banner">
			<swiper class="swiper" style="height: 454rpx;" circular :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500" :current="currentSwiper" @change="change">
				<swiper-item v-for="(item,index) in goods.images_text" :key="index">
					<image style="width: 100%;height: 454rpx;overflow: hidden;" :src="$wanlshop.oss(item)" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{goods.images_text.length}}</view>
		</view>
		
		<view class="header bg-white margin-bottom-xs padding-bottom-xs">
			
			<view class="tips padding-lr margin-bottom-sm text-cut-1" v-if="goods.slogan">{{goods.slogan}}</view>
			<text class="padding-top-sm padding-lr name wanl-black text-lg text-cut-2 text-bold6">{{goods.title}}</text>
			<!-- <scroll-view scroll-x="true" class="sku flex justify-start align-center">
				<view class="item flex flex-direction align-center margin-top-sm" v-for="(item,index) in goods.sku" :key="index" :class="{cur:cur == index}" @tap="cur = index">
					<text class="title">{{item.name}}</text>
					<view class="price">
						<text class="text-price">{{item.price}}</text>
					</view>
				</view>
			</scroll-view> -->
			
			<view class="t flex justify-between align-center padding-lr">
				<view class="rate flex justify-start align-center">
					<uni-rate readonly :allowHalf="true" :max="5" :value="goods.score" :size="14" color="#CCCCCC" active-color="#f00" style="margin-right: 4rpx;" /> {{goods.score}}
					<text>≥{{goods.order_quantity}}{{goods.show_unit}}起订</text>
				</view>
				<view class="view flex justify-start align-center" v-if="goods.goods_type == 1">
					<text @tap="addCollect" v-if="iscollect == 1" class="icon-yiguanzhu iconfont wanl-red"></text>
					<text @tap="addCollect" v-else class="icon-tianjiashoucang iconfont"></text>
					<text :class="{'wanl-red':iscollect == 1}">{{goods.collect}}</text>
					<text class="icon-liulan1 iconfont"></text>
					<text>{{goods.browse}}</text>
				</view>
			</view>
			
			<!-- <view class="tags padding-lr margin-bottom-xs" v-if="goods.tags_text">
				<text v-for="(d,k) in goods.tags_text" :key="k">{{d}}</text>
			</view> -->
		</view>
		
		<!-- <view scroll-x="true" class="lists padding-lr" scroll-left="0" @tap="show = true">
			<view class="item" v-for="(item,index) in goods.equitysArr" :key="index">
				<image src="/static/images/medical/bookingsystem/fuwu4.png" mode="widthFix"></image>
				<text>{{item.name}}</text>
			</view>
		</view> -->
		
		
		<view class="evaluate bg-white padding-lr" v-if="goods.goods_type == 1">
			<view class="head flex justify-between align-center">
				<text>用户评价</text>
				<view class="more flex justify-end align-center" @tap="$wanlshop.to(`/pages/medicalcare/homemaking/comment?id=${goods.id}&t=1&shop_id=${goods.shop_id}`)">
					<text class="text-cut-2">评论({{comment}})</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="wanl-gray text-sm text-center padding-bottom padding-top-lg" v-if="commentList.length == 0">暂无评论</view>
			<scroll-view class="list flex justify-start align-center" scroll-x="true" scroll-left="0">
				<view class="item" v-for="(data,index) in commentList" :key="index">
					<view class="top flex justify-between">
						<view class="left flex justify-start align-center">
							<image :src="$wanlshop.oss(data.user.avatar, 35, 35, 2, 'avatar')" mode="aspectFill"></image>
							<view class="name flex flex-direction">
								<text>{{data.user.username}}</text>
								<uni-rate readonly :allowHalf="true" :max="5" :value="data.score" :size="12" color="#CCCCCC" active-color="#4CBD66"  />
							</view>
						</view>
						<view class="times"> {{data.createtime_text.split(' ')[0]}}发表 </view>
					</view>
					<view class="text text-cut-2">{{data.content}}</view>
					<view class="images">
						<image :src="$wanlshop.oss(item)" mode="aspectFill" v-for="(item,index) in data.images_text" :key="index"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<wanl-divider class="bg-white margin-top-sm" bgcolor="#fff" width="60%">服务详情</wanl-divider>
		<view class="wanl-goods-content margin-bottom-sm bg-white padding-lr" bgcolor="#fff" id="details"><rich-text :nodes="goods.content"></rich-text></view>
		
		<u-popup v-model="show" mode="bottom" :border-radius="20">
			<view class="bg-white u-popup">
				<text class="title">保障说明</text>
				<view class="list">
					<view class="item" v-for="(item,index) in goods.equitysArr" :key="index">
						<view class="top">
							<image src="/static/images/medical/bookingsystem/fuwu4.png" mode="widthFix"></image>
							<text>{{item.name}}</text>
						</view>
						<view class="content">{{item.content}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<view class="safeAreaBottom"></view>
		<!-- 底部 -->
		<view class="btn flex justify-center align-center wanlian cu-bar foot">
			<view class="lightning flex justify-center align-center phone" @tap="$wanlshop.phone(goods.mobile)">
				<text>拨打电话</text>
			</view>
			<view class="lightning flex justify-center align-center" @tap="showPop = true">
				<text>立即{{goods.is_reservation == 1 ? '预约' : '预约'}}</text>
			</view>
		</view>
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="() => {}">
			<!-- 顶部 -->
			<view style="z-index: 99999;" class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''"
				@tap="modalName = null">
				<view class="wanl-modal-menu cu-dialog" @tap.stop=""><wanl-directs @change="modalName = null" /></view>
			</view>
		</view>
		
		<u-popup v-model="showPop" mode="bottom" width="100%" border-radius="20" :closeable="true">
			<view class="popList">
				<view class="text-df">规格</view>
				<view class="skus">
					<view class="item flex flex-direction align-center margin-top-sm" v-for="(item,index) in goods.sku" :key="index" :class="{cur:cur == index}" @tap="cur = index">
						<text class="title">{{item.name}}/￥{{item.price}}</text>
					</view>
				</view>
				<view class="number flex justify-between margin-top">
					<view class="text-df">购买数量</view>
					<uni-number-box :min="goods.order_quantity" :value="quantity" @change="changeNum"></uni-number-box>
				</view>
				<button style="width: 100%;background-color: #4CBD66;" class="lightning cu-btn round text-bold" @tap="addOrder('placeOrder', 1)">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		onNavigationBarButtonTap(e) {
			this.modalName = 'menu'
		},
		data() {
			return {
				loading: false,
				showPop: false,
				modalName:'',
				goods: null,
				show: false,
				currentSwiper:0,
				cur: 0,
				iscollect: 2,
				commentList:[],
				comment:0,
				quantity:1
			};
		},
		computed: {
			...mapState(['common'])
		},
		onLoad(option) {
			this.loadData(option);
		},
		methods: {
			async ifcollect(option) {
				await uni.request({
					url: '/addons/homeking/api.collect/iscollect',
					method: 'POST',
					data: {
						type: 1,
						goods_id: option.id
					},
					success: res => {
						this.iscollect = res.data;
					}
				})
			},
			change(e) {
				this.currentSwiper = e.detail.current
			},
			async addOrder() {
				if(this.cur == null) {
					if(this.showPop) {
						this.$wanlshop.msg('请选择规格')
					} else {
						this.showPop = true
					}
				} else {
					if(this.goods.goods_type == 1) {
						this.$wanlshop.to(`/pages/user/order/addRecord?type=homeking&id=${this.goods.id}&num=${this.quantity}&address_id=0&cur=${this.cur}`);
						this.showPop = false
						this.cur = null
					} else {
						this.loading = true;
						let datas = await uni.request({url: '/publics/commons/getToken',method: 'POST',data:{type:`${this.order_type}_order_add`}})
						// 提交订单数据
						await uni.request({
							url: `/addons/homeking/api.order/add`,
							method: 'POST',
							data: {
								sex: 1,
								goods_type: 2,
								quantity: this.quantity,
								token: datas[1].data,
								sku_id: this.goods.sku[this.cur].id,
								goods_id: this.goods.id
							},
							success: res => {
								this.$wanlshop.to(`/pages/user/money/pay?type=homeking&token=${res.data.token}&id=${res.data.order_id}`);
								this.loading = false;
								this.showPop = false
								this.cur = null
							},
							complete: () => {
								setTimeout(() => {
									this.loading = false;
								}, 1500);
							}
						});
					}
				}
			},
			async loadData(data) {
				await uni.request({
					url: '/addons/homeking/api.goods/detail',
					data: data,
					method: 'post',
					success: res => {
						this.goods = res.data
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
							var img = `<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});
						this.quantity = res.data.order_quantity
						if (this.$store.state.user.isLogin && res.data.goods_type == 1) {
							this.ifcollect(data) 
						}
					}
				});
				await uni.request({
					url: '/addons/homeking/api.comment/lists',
					data: {
						goods_id:data.id,
						shop_id: data.shop_id
					},
					method: 'post',
					success: res => {
						console.log(res)
						this.commentList = res.data.data
						this.comment = res.data.total
					}
				});
			},
			async addCollect() {
				await uni.request({
					url: '/addons/homeking/api.collect/add',
					method: 'POST',
					data: {
						type:1,
						goods_id: this.goods.id
					},
					success: res => {
						this.iscollect = this.iscollect == 1 ? 2 : 1;
						this.goods.collect += this.iscollect == 1 ? 1 : -1
						this.$wanlshop.msg(`${this.iscollect == 1 ? '收藏成功' : '取消收藏成功'}`)
					}
				});
			},
			
			//商品规格修改数量
			changeNum(val) {
				this.quantity = parseInt(val);
			},
		}
	};
</script>


<style lang="scss">
	page {
		background-color: #ededed;
	}
	.cu-custom {
		background-color: #fff;
		.cu-bar {
			z-index: 99;
			background-color: #fff;
		}
	}
	.banner {
		height: 454rpx;
		position: relative;
		.indicator {
			position: absolute;
			bottom: 10rpx;
			right: 30rpx;
			z-index: 9;
			
			height: 30rpx;
			background: rgba(51,51,51,0.5);
			border-radius: 22rpx;
			padding: 0 12rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 30rpx;
		}
	}
	
	.header {
		// padding: 16rpx 30rpx 26rpx 30rpx;
		.tips {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #4CBD66;
			height: 44rpx;
			line-height: 44rpx;
			background: #E9F4EB;
		}
		.sku {
			flex-wrap: nowrap;
			padding: 0 30rpx;
			white-space: nowrap;
			.item {
				display: inline-flex;
				height: 118rpx;
				background: #F4F4F4;
				border-radius: 6rpx;
				margin-right: 20rpx;
				padding: 0 14rpx;
				justify-content: center;
				border: 1px solid #F4F4F4;
				&:last-child {
					margin-right: 0;
				}
				.title {
					display: inline-block;
					font-size: 38rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 54rpx;
				}
				.price {
					margin-top: 2rpx;
					color: #E31F1F;
					text {
						&:nth-child(1) {
							font-size: 32rpx;
							font-weight: bold;
						}
						&:nth-child(2) {
							font-size: 22rpx;
						}
					}
				}
				&.cur {
					background-color: #fff;
					border-color: #4CBD66;
				}
			}
		}
		> .t {
			margin: 14rpx 0 12rpx 0;
			.rate {
				color: #f00;
				font-size: 28rpx;
				> text {
					display: inline-block;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 34rpx;
					margin-left: 20rpx;
				}
			}
			.view {
				text {
					display: inline-block;
					color: #555555;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #555555;
					line-height: 34rpx;
					&.iconfont {
						font-size: 30rpx;
						margin-right: 4rpx;
						margin-left: 28rpx;
						font-weight: bold;
					}
					&:nth-child(1) {
						margin-left: 0;
					}
				}
			}
		}
		.tags {
			text {
				display: inline-block;
				color: #4CBD66;
				border: 1px solid #4CBD66;
				border-radius: 4rpx;
				margin-right: 10rpx;
				font-size: 20rpx;
				padding: 2rpx 8rpx;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	
	
	.lists {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		white-space: wrap;
		margin: 20rpx 0;
		background-color: rgba(76, 189, 102, 0.2);
		padding: 20rpx 0;
		.item {
			display: inline-flex;
			justify-content: flex-start;
			align-items: center;
			&:last-child {
				margin-right: 0;
			}
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
			text {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #4CBD66;
				line-height: 34rpx;
			}
		}
	}
	.btn {
		display: flex;
		justify-content: space-around;
		align-items: center;
		.lightning {
			width: 320rpx;
			height: 72rpx;
			background: #4CBD66;
			border-radius: 50rpx;
			text {
				color: #fff;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
	.wanlian,.safeAreaBottom {
		height: calc(128rpx + env(safe-area-inset-bottom)) !important;
	}
	.wanlian {
		background-color: #fff !important;
	}
	.evaluate {
		padding-top: 10rpx;
		padding-bottom: 32rpx;
		margin-bottom: 15rpx;
		.head {
			margin-bottom: 10rpx;
			> text {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 42rpx;
			}
			view {
				text {
					color: #888888;
					font-weight: bold;
					&:nth-child(1) {
						font-size: 22rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						line-height: 30rpx;
					}
					&:nth-child(2) {
						font-size: 20rpx;
						margin-left: 14rpx;
					}
				}
			}
		}
		.list {
			white-space: nowrap;
			.item {
				display: inline-flex;
				width: 536rpx;
				height: 298rpx;
				background: #F4F4F4;
				border-radius: 10rpx;
				margin-right: 20rpx;
				padding: 20rpx 20rpx 12rpx 20rpx;
				flex-direction: column;
				&:last-child {
					margin-right: 0;
				}
				.top {
					.left {
						image {
							width: 52rpx;
							height: 52rpx;
							border-radius: 50rpx;
						}
						.name {
							margin-left: 10rpx;
							text {
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 28rpx;
								margin-bottom: 4rpx;
							}
						}
					}
					.times {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #AAAAAA;
						line-height: 28rpx;
					}
				}
				.text {
					display: inline-block;
					width: 100%;
					font-size: 20rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					// font-weight: 500;
					color: #000000;
					line-height: 28rpx;
					height: 56rpx;
					white-space: initial;
					margin: 32rpx 0 10rpx 0;
				}
				
				.images {
					margin-bottom: 8rpx;
					
					image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 16rpx;
					}
				}
			}
		}
	}
	.store {
		padding: 0 30rpx;
		padding-bottom: 18rpx;
		image {
			width: 108rpx;
			height: 108rpx;
			border-radius: 6rpx;
		}
		.info {
			margin-left: 20rpx;
			> text {
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #444444;
				line-height: 42rpx;
			}
			.more {
				margin-top: 8rpx;
				color: #4CBD66;
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #4CBD66;
				line-height: 26rpx;
			}
		}
	}
	.renzhengyonghu {
		.t {
			margin-left: 30rpx;
			text {
				display: inline-block;
				height: 30rpx;
				line-height: 28rpx;
				border-radius: 4rpx;
				border: 1rpx solid #4CBD66;
				padding: 0 4rpx;
				margin-right: 8rpx;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	
	.u-popup {
		padding: 36rpx 34rpx;
		.title {
			display: inline-block;
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 26rpx;
		}
		.list {
			.item {
				margin-bottom: 30rpx;
				&:last-child {
					margin-bottom: 0;
				}
				.top {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 12rpx;
					}
					text {
						display: inline-block;
						font-size: 34rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #4CBD66;
						line-height: 48rpx;
					}
				}
				.content {
					padding-left: 52rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 30rpx;
					margin-top: 4rpx;
				}
			}
		}
	}
	.wanl-red {
		color: #f00 !important;
	}
	
	.popList {
		padding: 80rpx 30rpx 30rpx 30rpx;
		.skus {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.item {
				background-color: #f6f6f6;
				padding: 10rpx 20rpx;
				border-radius: 50rpx;
				&.cur {
					background-color: #4CBD66;
					color: #fff;
				}
				.title {
					display: inline-block;
					font-size: 28rpx;
				}
			}
		}
		button {
			background-color: #4CBD66;
			color: #fff;
			height: 80rpx;
			width: 690rpx !important;
			margin-top: 40rpx;
		}
	}
</style>